<template>
  <div>echarts测试页面</div>
  <e-charts class="cahrt" :option="option"></e-charts>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const data = ref([
  { value: 11, name: "A" },
  { value: 31, name: "B" },
  { value: 45, name: "C" },
  { value: 25, name: "D" },
  { value: 16, name: "E" },
]);
const option = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: data.value.map((item) => item.name),
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        name: "销量",
        type: "bar",
        barWidth: "60%",
        data: data.value.map((item) => item.value),
      },
    ],
  };
});

// setInterval(() => {
//   data.value = data.value.map((item) => ({
//     name: item.name,
//     value: Math.random() * 100,
//   }));
// }, 1000);
</script>

<style scoped>
.cahrt {
  height: 400px;
}
</style>
